<template>
    <div class="kt-space password-mode">
        <el-card style="height: calc(100%)">
            <el-form ref="dataFormRef" :model="dataForm" label-width="80px">
                <el-row :gutter="30">
                    <el-col :span="12">
                        <el-row :gutter="10">
                            <el-col :span="12">
                                <el-form-item label="类型">
                                    <el-select v-model="type" value-key="id" style="width: 100%">
                                        <el-option-group v-for="group in enums.type" :key="group.label" :label="group.label">
                                            <el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item">
                                                <span style="float: left">{{ item.label }}</span>
                                                <span style="float: right;color: var(--el-text-color-secondary);font-size: 13px;">
                                                    {{ item.title }}
                                                </span>
                                            </el-option>
                                        </el-option-group>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="操作" prop="operate">
                                    <el-select v-model="dataForm.operate">
                                        <el-option v-for="(item, index) in enums.operate" :key="index" :label="item.label" :value="item.value" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-col>
                    <el-col :span="12" style="display:flex;justify-content: right;">
                        <el-button round plain @click="onSearch('search')" icon="el-icon-search">查看</el-button>
                        <el-button round plain @click="onSearch('reset')" icon="el-icon-refresh-left">重置</el-button>
                    </el-col>
                </el-row>
                <el-row :gutter="30">
                    <el-col :span="12">
                        <el-form-item label="输入内容" prop="input">
                            <el-input v-model="dataForm.input" resize="none" :rows="9" type="textarea"/>
                        </el-form-item>
                        <el-form-item label="携带参数" prop="params" style="margin-top: 32px">
                            <el-input v-model="dataForm.params" resize="none" :rows="5" type="textarea"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="输出结果" prop="output">
                            <el-input v-model="dataForm.output" resize="none" :rows="16" type="textarea" readonly/>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-card>
    </div>
</template>

<script lang="ts" setup>
import {ref} from 'vue';
import {service} from "@/utils";

defineOptions({name: 'Password'});


const dataFormRef = ref();
const type = ref({id: 'druid', value: 'druid'});
const enums = ref({
    operate: [
        {label: '加密', value: 'encrypt'},
        {label: '解密', value: 'decrypt'},
    ],
    type: [{
        label: '公共',
        options: [
            {
                id: 'druid',
                value: 'druid',
                label: 'Druid',
                title: '连接数据库'
            },
        ],
    }, {
        label: '综合采集',
        options: [
            {
                id: 'icsRedis',
                value: 'icsRedis',
                label: 'Redis',
                title: 'Redis缓存组件'
            },
            {
                id: 'zk_druid',
                value: 'druid',
                label: 'Zookeeper',
                title: 'Zookeeper组件'
            },
        ],
    }]
});
const dataForm = ref({
    operate: 'encrypt',
    type: 'druid',
    option: 'druid',
    input: null,
    output: null,
    params: null,
})

const onSearch = (value: string) => {
    if (value === 'reset') {
        dataFormRef.value.resetFields();
    } else {
        service.post(`/applet/password/${type.value.value}`, dataForm.value).then(({data}) => dataForm.value.output = data)
    }
}
</script>

<style lang="scss" scoped>
.password-mode {
    height: 100%;
}
</style>